<template>
  <div class="settlementIndex">
    
    <div class="settlementIndexDiv">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
      <el-date-picker
        v-model="betweenTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="sendMsg">
      </el-date-picker>
    </div>

    <el-row class="settlementRow" :gutter="20">
      <el-col :span="12">
        <div class="settlementXianjin">
          <h3 class="xianjinH3">现金收入 <span class="h3span">￥{{inOutData.allIn}}</span></h3>
          <div class="settlementRowDiv">
            <p v-for="(item, key) in inOutData.inList" class="settlementRowP">
              {{item.ordertype|orderName}} 
              <span class="h3span">￥{{item.money|abs}}</span>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="settlementXianjin">
          <h3 class="xianjinH3">现金支出 <span class="h3span">￥{{inOutData.allOut}}</span></h3>

          <div class="settlementRowDiv">
            <p v-for="(item, key) in inOutData.outList" class="settlementRowP">
              {{item.ordertype|orderName}} 
              <span class="h3span">￥{{item.money|abs}}</span>
            </p>
          </div>
        </div>
      </el-col>   
    </el-row>


    <el-row class="settlementRow" :gutter="20">
      <el-col :span="12">
        <router-link tag="div" :to="{name:'currFeat',params:{times:betweenTime}}">
          <div class="settlementYeji">
            <h3 class="xianjinH3">本期业绩 <span class="h3span">￥{{yejiTcheng.allyj}}</span></h3>
            <div class="settlementRowDiv">
              <p class="settlementRowP">现金业绩 <span class="h3span">￥{{yejiTcheng.allxy}}</span></p>
              <p class="settlementRowP">卡耗业绩 <span class="h3span">￥{{yejiTcheng.allky}}</span></p>
            </div>
          </div>
        </router-link>      
      </el-col>

      <el-col :span="12">
        <div class="settlementYeji">
          <h3 class="xianjinH3">本期提成 <span class="h3span">￥{{yejiTcheng.alltc}}</span></h3>
          <div class="settlementRowDiv">
            <p class="settlementRowP">现金提成 <span class="h3span">￥{{yejiTcheng.allxt}}</span></p>
            <p class="settlementRowP">卡耗提成 <span class="h3span">￥{{yejiTcheng.allkt}}</span></p>
            <p class="settlementRowP">手工提成 <span class="h3span">￥{{yejiTcheng.allst}}</span></p>
            <p class="settlementRowP">其他提成 <span class="h3span">￥{{yejiTcheng.allqt}}</span></p>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="6">
        <div class="guestList">
          <h5 class="xianjinH3">客户现金消费 <span class="h3span">￥{{guestData.allxj|fixed }}</span></h5>
          <div class="guestDiv">
            <div v-for="(item, key) in guestData.xjList" class="guestChildDiv">
              <div class="guestHeadDiv">
                <headImg :imgUrl="item.headurl" size="40"></headImg>
                <span class="headSpan" @click="openGuest(item.id)">{{item.name}}</span>
              </div>
              <span style="margin-right: 5px;">￥{{item.recemoney}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="guestList">
          <h5 class="xianjinH3">客户卡耗消费 <span class="h3span">￥{{guestData.allkh|fixed}}</span></h5>
          <div class="guestDiv">
            <div v-for="(item, key) in guestData.khList" class="guestChildDiv">
              <div class="guestHeadDiv">
                <headImg :imgUrl="item.headurl" size="40"></headImg>
                <span class="headSpan" @click="openGuest(item.id)">{{item.name}}</span>
              </div>
              <span style="margin-right: 5px;">￥{{item.cardreduce}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="guestList">
          <h5 class="xianjinH3">客户余额消费 <span class="h3span">￥{{guestBalData.allBalance|fixed}}</span></h5>
          <div class="guestDiv">
            <div v-for="(item, key) in guestBalData.balanceList" class="guestChildDiv">
              <div class="guestHeadDiv">
                <headImg :imgUrl="item.headurl" size="40"></headImg>
                <span class="headSpan" @click="openGuest(item.id)">{{item.name}}</span>
              </div>
              <span class="moneySpan">￥{{item.balance}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="guestList">
          <h5 class="xianjinH3">客户赠送消费 <span class="h3span">￥{{guestBalData.allGiftBalance|fixed}}</span></h5>
          <div class="guestDiv">
            <div v-for="(item, key) in guestBalData.giftBalanceList" class="guestChildDiv">
              <div class="guestHeadDiv">
                <headImg :imgUrl="item.headurl" size="40"></headImg>
                <span class="headSpan" @click="openGuest(item.id)">{{item.name}}</span>
              </div>
              <span style="margin-right: 5px;">￥{{item.giftbalance}}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import headImg from '@/components/headImg.vue'
import Settlement from '#/src/shop/settlement.js'
import Guest from '#/src/shop/guest.js'
export default {
    name: 'index',
    data () {
        return {
            betweenTime: [new Date(), new Date()],
            inOutData: {},
            yejiTcheng: {},
            guestBalData: {},
            guestData: {}
        }
    },
    methods: {
        sendMsg () {
            // 直接在前端转换成时间戳
            let begintime = Math.floor(new Date(this.betweenTime[0]).setHours(0,0,0,0)/1000)
            let endtime = Math.floor(new Date(this.betweenTime[1]).setHours(0,0,0,0)/1000) + 86400
            let data = {
                begintime: begintime,
                endtime: endtime
            }
            this.getMsg(data)
        },
        async getMsg (betweenTime) {
            let data = await Settlement.getPayInOut(betweenTime)
            this.inOutData = data
            let ytdata = await Settlement.getYejiTicheng(betweenTime)
            this.yejiTcheng = ytdata
            let gdata = await Settlement.getGuestxiaofei(betweenTime)
            this.guestBalData = gdata
            let xdata = await Settlement.getGuestOrderXiaofei(betweenTime)
            this.guestData = xdata
        },
        openGuest (id) {
            Guest.openGuestPage(id)
        }
    },
    mounted: function () {
        this.sendMsg()
    },
    components: {headImg}
}
</script>

<style>
  .settlementIndex{
    display:flex;
    flex-direction: column;
  }
  .settlementIndexDiv {
    display:flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .breadcrumb{
    padding: 0px 0px 10px 0px
  }
  .settlementRow{
    margin-bottom: 10px
  }
  .settlementXianjin{
    background-color: rgb(75, 139, 142);
    color: #fff;
    padding:10px;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    border-radius: 3px;
    height: 115px;
  }
  .settlementYeji{
    background-color: rgb(102, 162, 193);
    color: #fff;
    padding:10px;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    border-radius: 3px;
    height: 115px;
  }
  .xianjinH3{
    margin-bottom: 10px
  }
  .h3span{
    float: right
  }
  .settlementRowDiv {
    border-top:1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    padding: 10px 0px 0px 0px;
    overflow: auto;
  }
  .settlementRowP{
    padding:0px;
    margin:2px;
    font-size: 14px
  }
  .guestList{
    background-color: rgb(152, 184, 193);
    color: #fff;
    padding:10px;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    border-radius: 3px;
  }
  .guestDiv{
    border-top:1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 0px 0px 0px;
    height:220px;
    overflow:auto
  }
  .guestChildDiv{
    padding:0px;
    margin:2px;
    font-size: 14px;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .guestHeadDiv{
    display: flex;
    align-items: center;
  }
  .headSpan{
    padding-left: 5px;
  }
  .moneySpan{
    margin-right: 5px;
  }
</style>
